<template>
  <div class="ranking" id="456">
    <mescroll-vue
      ref="mescroll"
      :down="mescrollDown"
      :up="mescrollUp"
      @init="mescrollInit"
    >
      <div
        @click="goCouponlist"
        class="rank_item"
        v-for="(item, i) in couponList"
        :key="i"
      >
        <div class="rank_item_logo">
          <img class="rank_item_logo_img" :src="item.icon" alt="" />
        </div>
        <div class="rank_item_content">
          <div class="rank_item_title">
            <div class="rank_item_titlef">
              {{ activityname(item.activity_name) }}
            </div>
            <div>{{ item.create_at }}</div>
          </div>
          <div class="rank_item_pm">
            <div class="rank_item_pm_item">
              <img class="rank_item_ico" src="../assets/fs_ico.png" alt="" />
              <p class="fstxt">分数 {{ item.score }}</p>
              <img class="rank_item_ico1" src="../assets/pm_ico.png" alt="" />
              <p>排名 {{ item.rank }}</p>
            </div>

            <div v-show="item.is_open == 1" class="coupon">查看</div>
          </div>
          <div>中奖奖品：{{ reversedState(item) }}</div>
        </div>
      </div>
    </mescroll-vue>
  </div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue';

export default {
  name: 'ranking',
  components: {
    MescrollVue,
  },
  data() {
    return {
      couponList: [],
      mescroll: null, // mescroll实例对象
      mescrollDown: { use: false },
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback,
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10, //每页数据条数,默认10
        },
        htmlNodata: '<p class="upwarp-nodata">-- 没有了 --</p>',
        noMoreSize: 3,
        empty: {
          warpId: '456',
        },
      },
    };
  },
  created() {
    if (this.$route.query.openID) {
      localStorage['openid'] = this.$route.query.openID;
    }
    if (this.$route.query.mobile_login) {
      this.mobile_login = this.$route.query.mobile_login;
    }
    if (this.$route.query.token) {
      localStorage['token'] = this.$route.query.token;
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    activityname(name) {
      if (name.length > 6) {
        return `${name.substring(0, 6)}...`;
      } else {
        return name;
      }
    },
    reversedState(item) {
      // -1:未开奖 0:未中奖 1:已开奖 2:开奖失败
      switch (item.state) {
        case -1:
          return '未开奖';
          // eslint-disable-next-line no-unreachable
          break;
        case 0:
          return '未中奖';
          // eslint-disable-next-line no-unreachable
          break;
        case 1:
          return item.prize;
          // eslint-disable-next-line no-unreachable
          break;
        case 2:
          return `${item.prize} 开奖失败`;
          // eslint-disable-next-line no-unreachable
          break;
        default:
          return '加载中';
          // eslint-disable-next-line no-unreachable
          break;
      }
    },
    upCallback(page, mescroll) {
      this.getCouponList(page, mescroll);
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    init() {
      document
        .querySelector('body')
        .setAttribute('style', 'background-color:#ebebeb');
    },
    getCouponList(page, mescroll) {
      this.$api
        .record({
          page: page.num,
          size: page.size,
        })
        .then(res => {
          if (res.code != 200) {
            if (res.code == 401) {
              mescroll.endErr();
              localStorage['mobile'] = null;
              this.$api.gologin(location.href);
            } else {
              this.$toast(res.message);
            }
          } else {
            var newList = res.data.list;
            if (page.num === 1) {
              this.couponList = [];
            }
            // 把请求到的数据添加到列表
            this.couponList = this.couponList.concat(newList);
            // 数据渲染成功后,隐藏下拉刷新的状态
            this.$nextTick(() => {
              mescroll.endSuccess(res.data.list.length);
            });
            this.pageShow = true;
          }
        })
        .catch(err => {
          mescroll.endErr();
        });
    },
    goCouponlist() {
      this.$router.push({
        name: 'list',
      });
    },
  },
};
</script>
<style lang="scss">
.ranking {
  width: 100%;
  padding: 20px;
  .rank_item {
    display: flex;
    padding: 20px;
    background: white;
    border-radius: 10px;
    margin-bottom: 20px;
    .rank_item_logo {
      width: 20%;
    }
    .rank_item_content {
      margin-left: 20px;
      width: 80%;
      text-align: left;
      font-size: 26px;
      color: #666666;
      font-weight: bold;
    }
    .rank_item_logo_img {
      width: 120px;
      height: 120px;
    }
    .rank_item_title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 12px;
    }
    .rank_item_titlef {
      font-size: 30px;
      font-weight: bold;
      color: #2a2a2a;
    }

    .rank_item_pm {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      .rank_item_ico {
        display: flex;
        width: 30px;
        height: 26px;
        margin-right: 12px;
      }
      .rank_item_ico1 {
        display: flex;
        width: 30px;
        height: 30px;
        margin-right: 12px;
      }
      .fstxt {
        margin-right: 20px;
      }
      .rank_item_pm_item {
        display: flex;
      }
      .coupon {
        border-radius: 25px;
        border: solid 2px #f54e49;
        font-size: 26px;
        color: #f54e49;
        padding: 4px 20px;
      }
    }
  }
}
</style>
